<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="add">
    <el-form :inline="true" :model="studentFrom" class="demo-form-inline">
        <el-form-item label="学生编号">
            <el-input v-model="studentFrom.sid" placeholder="学生编号"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
            <el-input v-model="studentFrom.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄">
            <el-input v-model="studentFrom.sage" placeholder="学生年龄"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>

        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="add">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="student"
            border
            style="width: 100%">
        <el-table-column
                prop="sid"
                label="学生编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sage"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="aclass.cname"
                label="班级">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-edit" @click="upt(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--修改-->
    <el-dialog
            title="修改学生信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="studentUpFrom" label-width="80px">
            <el-form-item label="学生id">
                <el-input v-model="studentUpFrom.sid"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="studentUpFrom.sname"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input v-model="studentUpFrom.sage"></el-input>
            </el-form-item>
            <el-form-item label="学生班级">
                <el-input v-model="studentUpFrom.cid"></el-input>
            </el-form-item>
            <!-- <el-form-item label="班级" :label-width="formLabelWidth">
                 <el-select v-model="studentUpFrom.cid" placeholder="请选择班级">
                     <el-option label="1" value="小班"></el-option>
                     <el-option label="2" value="中班"></el-option>
                 </el-select>
             </el-form-item>-->
        </el-form>
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="sur">确 定</el-button>
    </el-dialog>
    <!--添加-->
    <el-dialog
            title="添加学生信息"
            :visible.sync="add1"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="studentAddFrom" label-width="80px">
            <el-form-item label="学生姓名">
                <el-input v-model="studentAddFrom.sname"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input v-model="studentAddFrom.sage"></el-input>
            </el-form-item>
            <el-form-item label="学生班级">
                <el-input v-model="studentAddFrom.cid"></el-input>
            </el-form-item>
        </el-form>
        <el-button @click="add1 = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
    </el-dialog>
</div>
</body>
<script>
    let ee = new Vue({
        el: "#add",
        data: {
            //添加
            studentAddFrom: {},
            //添加按钮弹窗
            add1: false,
            //修改
            studentUpFrom: {},
            //修改弹窗
            dialogVisible: false,
            //查询
            studentFrom: {},
     student: [],
            //默认页
            currentPage: 1,
            //默认每页几条
            pageSize: 5,
            //总条数
            total: 0,
        },
        //网页加载完毕调用
        created() {
            this.init();
        },
        methods: {
            //查询全部
            init() {
                axios.post("http://localhost:8080/student/find/" + this.currentPage + "/" + this.pageSize, this.studentFrom).then(result => {
                    console.log()
                    this.student = result.data.data.records
                    this.total = result.data.data.total;
                    console.log(this.student)
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.init();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.init();
            },
            //删除
            del(row) {
                let sid = row.sid;
                axios.delete("http://localhost:8080/student/delete/" + sid).then(result => {
                    if (result.data.code == 200) {
                        this.$message.success("删除成功")//弹出成功的消息框
                        this.init();//回调init
                    }
                })

            },
            //点击编辑弹窗
            upt(row) {
                this.dialogVisible = true;
                this.studentUpFrom = row;
            },
            quxiao(){
                this.dialogVisible = false;
                this.init();
            },


            //修改确认按钮
            sur() {
                axios.put("http://localhost:8080/student/update", this.studentUpFrom).then(result => {
                    console.log("ssssssjhhhhhhhhhhhh")
                    if (result.data.code == 200) {
                        this.$message.success("修改成功");
                        this.init();
                    }
                    this.dialogVisible = false;
                })
            },
            //点击添加弹窗
            add() {
                this.add1 = true;

            },
            //确认添加
            ok(){
               axios.post("http://localhost:8080/student/insert",this.studentAddFrom).then(result=>{
                        console.log("22222")
                    if (result.data.code == 200) {
                        this.$message.success("添加成功");
                        this.init();
                    }
                })
                    this.add1 = false;
            }


        }


    })
</script>
</html>